<template>
	<view class="content">
		<swiper class="swiper" 
		:indicator-dots="true"
		indicator-color="#ffffff"
		:indicator-active-color="background[current]"
		:current="current"
		:autoplay="autoplay" 
		:duration="duration"
		@change="onChange">
			<swiper-item>
				<view class="swiper-item">
					<view class="swiper-item-desc">
						<view class="t1 g1">{{ i18n.guide.t1 }}</view>
						<view class="t2 g1">{{ i18n.guide.t2 }}</view>
					</view>
					<image class="swiper-item-image" src="/static/images/guide/guid1.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="swiper-item-desc">
						<view class="t1 g2">{{ i18n.guide.t3 }}</view>
						<view class="t2 g2">{{ i18n.guide.t4 }}</view>
					</view>
					<image class="swiper-item-image" src="/static/images/guide/guid2.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="swiper-item-desc">
						<view class="t1 g3">{{ i18n.guide.t5 }}</view>
						<view class="t2 g3">{{ i18n.guide.t6 }}</view>
					</view>
					<view class="swiper-item-ok"  @click="launchFlag()">
						<view class="frame-IhM-2 ">
							<view class="text-JuU-1">
								<view class="p-text-JuU-1">
									<text class="span-jXt-1 ">{{ i18n.guide.experience }}</text>
								</view>
							</view>
						</view>
					</view>
					<image class="swiper-item-image" src="/static/images/guide/guid3.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {commonMixin} from '@/common/mixin/mixin.js'
	export default {
		mixins: [commonMixin],
		data() {
			return {
				background: ['#FF8D1A', '#2B67FF', '#7948EA'],
				current: 0,
				autoplay: false,
				duration: 500,
				jumpover: '',
				experience: ''
			}
		},
		methods: {
			onChange(e){
				console.log(e)
				this.current = e.detail.current
			},
			launchFlag: function(){
				/**
				 * 向本地存储中设置launchFlag的值，即启动标识；
				 */
				console.log("1111111111111111")
				uni.setStorage({
						key: 'launchFlag',
						data: true,
				});
				uni.switchTab({
					url: '/pages/index/index'
				});
				
			}
		}
	}
</script>
<style lang="less">
	page,
	.content{
		width: 100%;
		height: 100%;
		background-size: 100% auto ;
		padding: 0;
	}
	.swiper{
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
	.swiper-item {
		width: 100%;
		height: 100%;
		position: relative;
	}
	& /deep/ .uni-swiper-dot{
		width: 60rpx;
		height: 10rpx;
		border-radius: 10rpx;
	}
	& /deep/ .uni-swiper-dots-horizontal{
		bottom: 80rpx;
	}
	.swiper-item-ok{
		position: fixed;
		z-index: 99999;
		bottom: 160rpx;
		left: 50%;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		.frame-IhM-2 {
		    position: relative;
		    z-index: 2;
		    height: auto;
		    border-radius: 137px;
		    mix-blend-mode: normal;
		    display: flex;
		    justify-content: flex-start;
		    align-items: flex-start;
		    padding: 11px 67px 11px 67px;
		    background: linear-gradient(0deg, rgba(121, 72, 234, 1) 0%, rgba(169, 133, 255, 1) 100%);
		    box-sizing: border-box;
		    gap: 10px;
		}
		.text-JuU-1 {
		    position: relative;
		    display: flex;
		    flex-direction: column;
		    z-index: 0;
		    justify-content: start;
		    height: 29px;
		    mix-blend-mode: normal;
		    color: rgba(255, 255, 255, 1);
		    font-size: 24px;
		    font-weight: 500;
		    opacity: 1;
		    font-family: 'HarmonyOSSansSC-Medium';
		    letter-spacing: 0px;
		    white-space: nowrap;
		    width: auto;
		}
		.p-text-JuU-1 {
		    display: inline;
		    margin: 0px;
		    width: 100%;
		    text-align: left;
		}
		.span-jXt-1 {
		    text-decoration-line: none;
		}
	}
	.swiper-item-desc{
		position: absolute;
		z-index: 9999999;
		width: 100%;
		text-align: center;
		bottom: 320rpx;
		.g1{
			color: #FF8D1A;
		}
		.g2{
			color: #2B67FF;
		}
		.g3{
			color: #7948EA;
		}
		.t1{
			font-size: 60rpx;
			font-weight: bold;
			padding: 0 30rpx;
		}
		.t2{
			font-size: 30rpx;
			padding: 10rpx 30rpx 0 30rpx;
		}
	}
	.swiper-item-image{
		width: 100%;
		height: 100%;
	}
	.jump-over,.experience{
		position: fixed;
		height: 60upx;
		line-height: 60upx;
		padding: 0 40upx;
		border-radius: 30upx;
		font-size: 32upx;
		color: #454343;
		border: 1px solid #454343;
		z-index: 9999999;
	}
	.jump-over{
		right: 45upx;
		top: 125upx;
		z-index: 999999;
	}
	.experience{
		width: 100%;
		height: 150upx;
		bottom: 12%;
		border: 0;
	}
</style>
